<template>
  <div class="order-detail-container">
    <!-- 头部导航 -->
    <van-nav-bar
      title="订单详情"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
    
    <!-- 订单状态卡片 -->
    <div class="status-card">
      <div class="status-icon">
        <van-icon :name="statusIcon" size="40" :color="statusColor" />
      </div>
      <div class="status-info">
        <h3>{{ orderStatusText }}</h3>
        <p v-if="orderData.deliveryStatus === 2">物流公司：{{ orderData.expressCompany }}</p>
        <p v-if="orderData.deliveryStatus === 2">运单号码：{{ orderData.expressNo }}</p>
      </div>
    </div>
    
    <!-- 收货地址 -->
    <div class="address-card">
      <van-icon name="location-o" size="20" />
      <div class="address-info">
        <div class="receiver">
          <span>{{ orderData.receiverName }}</span>
          <span>{{ orderData.receiverPhone }}</span>
        </div>
        <div class="address">
          {{ orderData.receiverAddress }}
        </div>
      </div>
    </div>
    
    <!-- 商品列表 -->
    <div class="goods-card">
      <div class="card-title">商品信息</div>
      <div class="goods-list">
        <div v-for="item in orderData.goodsList" :key="item.id" class="goods-item">
          <img :src="item.image" alt="商品图片" class="goods-image">
          <div class="goods-info">
            <div class="goods-name">{{ item.name }}</div>
            <div class="goods-spec">{{ item.spec }}</div>
            <div class="goods-price">
              <span>¥{{ item.price }}</span>
              <span>x{{ item.quantity }}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="goods-footer">
        共{{ totalQuantity }}件商品 合计：<span class="total-price">¥{{ orderData.totalAmount }}</span>
      </div>
    </div>
    
    <!-- 订单信息 -->
    <div class="order-info-card">
      <div class="info-item">
        <span>订单编号</span>
        <span>{{ orderData.orderNo }}</span>
      </div>
      <div class="info-item">
        <span>下单时间</span>
        <span>{{ orderData.createTime }}</span>
      </div>
      <div class="info-item">
        <span>支付方式</span>
        <span>{{ orderData.paymentMethod }}</span>
      </div>
      <div class="info-item">
        <span>支付时间</span>
        <span>{{ orderData.paymentTime || '--' }}</span>
      </div>
      <div v-if="orderData.deliveryTime" class="info-item">
        <span>发货时间</span>
        <span>{{ orderData.deliveryTime }}</span>
      </div>
      <div v-if="orderData.remark" class="info-item">
        <span>订单备注</span>
        <span>{{ orderData.remark }}</span>
      </div>
    </div>
    
    <!-- 底部操作按钮 -->
    <div class="action-bar">
      <u-button 
	   style="background: linear-gradient(to bottom right, #fefcea, #f1daff);color: #2d2d2d; border-radius: 50rpx;"
        v-if="orderData.status === 0" 
        plain 
        type="danger" 
        @click="cancelOrder"
      >
        取消订单
      </u-button>
      <u-button 
	   style="background: linear-gradient(to right, #ff6034, #ee0a24);color: #fff; border-radius: 50rpx;"
        v-if="orderData.status === 0" 
        @click="goPayment"
      >
        去支付
      </u-button>
      <button 
	   style="background: linear-gradient(to right, #ff6034, #ee0a24);color: #fff; border-radius: 50rpx;"
        v-if="orderData.status === 2 && orderData.deliveryStatus === 1" 
        plain 
        size="small"
        @click="remindDelivery"
      >
        提醒发货
      </button>
      <u-button 
	   style="background: linear-gradient(to right, #ff6034, #ee0a24);color: #fff; border-radius: 50rpx;"
        v-if="orderData.deliveryStatus === 2" 
        size="small"
        @click="confirmReceipt"
      >
        确认收货
      </u-button>
      <u-button 
	    style="background: linear-gradient(to right, #ff6034, #ee0a24);color: #fff; border-radius: 50rpx;"
        v-if="[3,4,5].includes(orderData.status)" 
        plain 
        size="small"
        @click="deleteOrder"
      >
        删除订单
      </u-button>
      <button 
		style="background: linear-gradient(to right, #ff6034, #ee0a24);"
        v-if="[3,4,5].includes(orderData.status)" 
        plain 
        size="small"
        @click="buyAgain"
      >
        再次购买
      </button>
    </div>
    
    <!-- 物流信息弹窗 -->
    <u-popup :show="showLogistics" position="bottom" round>
      <div class="logistics-popup">
        <div class="popup-header">
          <h3>物流信息</h3>
          <van-icon name="close" @click="showLogistics = false" />
        </div>
        <div class="logistics-info">
          <div class="logistics-company">
            <span>{{ orderData.expressCompany }}</span>
            <span>{{ orderData.expressNo }}</span>
          </div>
          <u-steps direction="vertical" :active="0">
            <van-step v-for="(item, index) in logisticsList" :key="index">
              <h3>{{ item.context }}</h3>
              <p>{{ item.time }}</p>
            </van-step>
          </u-steps>
        </div>
      </div>
    </u-popup>
  </div>
</template>

<script>
// import { getOrderDetail, cancelOrder, confirmOrder, deleteOrder, getLogistics } from '@/api/order';

export default {
  name: 'OrderDetail',
 
  data() {
    return {
      orderId: null,
      orderData: {
        orderNo: 'aaaaa',
        status: 0,
        deliveryStatus: 0,
        createTime: '2025-5-14 05:14',
        paymentTime: '2025-5-14 05:14',
        paymentMethod: '2025-5-14 05:14',
        deliveryTime: '2025-5-14 05:14',
        expressCompany: 'dfsfsd',
        expressNo: '5345435353',
        receiverName: '测试',
        receiverPhone: '18384446555',
        receiverAddress: '北京市阿斯顿萨达',
        totalAmount: 0,
        remark: '备注水水水水水水',
        goodsList: [{
			spec:'规格',
			name:'苹果14',
			price:'7999',
			quantity:1,
			image:'/static/logo.png'
		}]
      },
      showLogistics: false,
      logisticsList: [{}]
    };
  },
  computed: {
    // 订单状态文本
    orderStatusText() {
      const statusMap = {
        0: '待付款',
        1: '已付款',
        2: '待发货',
        3: '待收货',
        4: '已完成',
        5: '已取消'
      };
      return statusMap[this.orderData.status] || '';
    },
    // 订单状态图标
    statusIcon() {
      const iconMap = {
        0: 'clock-o',
        1: 'paid',
        2: 'logistics',
        3: 'car',
        4: 'passed',
        5: 'close'
      };
      return iconMap[this.orderData.status] || 'question-o';
    },
    // 订单状态颜色
    statusColor() {
      const colorMap = {
        0: '#FF976A',
        1: '#07C160',
        2: '#1989FA',
        3: '#1989FA',
        4: '#07C160',
        5: '#969799'
      };
      return colorMap[this.orderData.status] || '#323233';
    },
    // 计算商品总数量
    totalQuantity() {
      return this.orderData.goodsList.reduce((total, item) => total + item.quantity, 0);
    }
  },
  created() {
    this.orderId = this.$route.query.id;
    this.loadOrderDetail();
  },
  methods: {
    // 加载订单详情
    async loadOrderDetail() {
      try {
        const { data } = await getOrderDetail(this.orderId);
        this.orderData = data;
      } catch (error) {
        console.error('获取订单详情失败', error);
      }
    },
    // 取消订单
    cancelOrder() {
      Dialog.confirm({
        title: '确认取消订单',
        message: '确定要取消此订单吗？'
      }).then(async () => {
        try {
          await cancelOrder(this.orderId);
          Toast.success('订单已取消');
          this.loadOrderDetail();
        } catch (error) {
          Toast.fail('取消订单失败');
        }
      }).catch(() => {
        // 取消操作
      });
    },
    // 去支付
    goPayment() {
      // 跳转到支付页面
      this.$router.push({
        path: '/payment',
        query: {
          orderNo: this.orderData.orderNo,
          amount: this.orderData.totalAmount
        }
      });
    },
    // 提醒发货
    remindDelivery() {
      Toast.success('已提醒商家尽快发货');
    },
    // 确认收货
    confirmReceipt() {
      Dialog.confirm({
        title: '确认收货',
        message: '请确认您已收到商品'
      }).then(async () => {
        try {
          await confirmOrder(this.orderId);
          Toast.success('收货成功');
          this.loadOrderDetail();
        } catch (error) {
          Toast.fail('确认收货失败');
        }
      }).catch(() => {
        // 取消操作
      });
    },
    // 删除订单
    deleteOrder() {
      Dialog.confirm({
        title: '删除订单',
        message: '确定要删除此订单吗？'
      }).then(async () => {
        try {
          await deleteOrder(this.orderId);
          Toast.success('订单已删除');
          this.$router.go(-1);
        } catch (error) {
          Toast.fail('删除订单失败');
        }
      }).catch(() => {
        // 取消操作
      });
    },
    // 再次购买
    buyAgain() {
      // 实现再次购买逻辑
      Toast.success('商品已加入购物车');
    },
    // 查看物流信息
    async viewLogistics() {
      try {
        const { data } = await getLogistics(this.orderData.expressNo);
        this.logisticsList = data;
        this.showLogistics = true;
      } catch (error) {
        Toast.fail('获取物流信息失败');
      }
    }
  }
};
</script>

<style lang="less" scoped>
.order-detail-container {
  padding-bottom: 60px;
  background-color: #f7f8fa;
  min-height: 100vh;
  
  .status-card {
    display: flex;
    align-items: center;
    padding: 20px 15px;
    background: linear-gradient(to right, #ff6034, #ee0a24);
    color: white;
    
    .status-icon {
      margin-right: 15px;
    }
    
    .status-info {
      flex: 1;
      
      h3 {
        margin: 0 0 8px 0;
        font-size: 18px;
      }
      
      p {
        margin: 5px 0;
        font-size: 14px;
        opacity: 0.9;
      }
    }
  }
  
  .address-card {
    display: flex;
    align-items: center;
    padding: 15px;
    margin: 10px;
    background-color: white;
    border-radius: 8px;
    
    .van-icon {
      margin-right: 10px;
      color: #ee0a24;
    }
    
    .address-info {
      flex: 1;
      
      .receiver {
        display: flex;
        justify-content: space-between;
        margin-bottom: 5px;
        font-size: 16px;
        font-weight: bold;
      }
      
      .address {
        font-size: 14px;
        color: #666;
      }
    }
  }
  
  .goods-card {
    margin: 10px;
    background-color: white;
    border-radius: 8px;
    
    .card-title {
      padding: 12px 15px;
      font-size: 15px;
      border-bottom: 1px solid #f5f5f5;
    }
    
    .goods-list {
      padding: 0 15px;
    }
    
    .goods-item {
      display: flex;
      padding: 12px 0;
      border-bottom: 1px solid #f5f5f5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .goods-image {
        width: 80px;
        height: 80px;
        margin-right: 10px;
        border-radius: 4px;
      }
      
      .goods-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        
        .goods-name {
          font-size: 14px;
          line-height: 1.4;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        
        .goods-spec {
          font-size: 12px;
          color: #999;
          margin: 5px 0;
        }
        
        .goods-price {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          
          span:first-child {
            color: #ee0a24;
            font-weight: bold;
          }
        }
      }
    }
    
    .goods-footer {
      padding: 12px 15px;
      text-align: right;
      font-size: 14px;
      border-top: 1px solid #f5f5f5;
      
      .total-price {
        color: #ee0a24;
        font-weight: bold;
        font-size: 16px;
      }
    }
  }
  
  .order-info-card {
    margin: 10px;
    padding: 15px;
    background-color: white;
    border-radius: 8px;
    font-size: 14px;
    
    .info-item {
      display: flex;
      justify-content: space-between;
      margin-bottom: 10px;
      
      &:last-child {
        margin-bottom: 0;
      }
      
      span:first-child {
        color: #999;
      }
    }
  }
  
  .action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 10px 15px;
    background-color: white;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
    
    .u-button {
      margin-left: 10px;
    }
  }
  
  .logistics-popup {
    padding: 20px;
    
    .popup-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
      
      h3 {
        margin: 0;
        font-size: 18px;
      }
      
      .u-icon {
        font-size: 18px;
        color: #969799;
      }
    }
    
    .logistics-company {
      display: flex;
      justify-content: space-between;
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #f5f5f5;
    }
    
  }
}
</style>